<template>
  <div class="cartContent">
    <carts-title :goodsNum="goodsNum"/>
    <carts-content v-if="JSON.stringify(this.cartsInfo) != '{}'" :cartsInfo="cartsInfo"></carts-content>
    <carts-empty v-else class="emptyCart"></carts-empty>
    <carts-settle :goodsCheckedNum="goodsCheckedNum"></carts-settle>
  </div>
</template>
<script>
// import { Dialog, Toast, Notify } from "vant";
import { mapState } from "vuex";
import CartsTitle from "./childcomps/CartsTitle";
import CartsContent from "./childcomps/CartsContent";
import CartsSettle from "./childcomps/CartsSettle";
import CartsEmpty from "./childcomps/CartsEmpty";
export default {
  components: {
    CartsTitle,
    CartsContent,
    CartsSettle,
    CartsEmpty
  },
  name: "Carts",
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      cartsInfo: state => state.carts //使用ES6的箭头函数来给count赋值
		}),
		goodsCheckedNum(){
			let obj = this.cartsInfo
			return Object.keys(obj).filter(item => obj[item].checked).length
		},
		goodsNum(){
			return Object.keys(this.cartsInfo).length
		}
  },
  methods: {
    // 从localStorage获取购物车信息
    cartsData() {
      // 从localStorage拿数据更新vuex的carts。
      this.$store.dispatch("asynShowCart");
      // this.cartsInfo = JSON.parse(JSON.stringify(this.$store.state.carts));
    },

    // 判断所有商品勾选，为true的情况下，将全选按钮设置为true，
    allGoodsChecked() {
      let checkedLen = 0;
      for (let item in this.cartsInfo) {
        if (this.cartsInfo[item].checked) {
          checkedLen++;
        }
        if (checkedLen == Object.keys(this.cartsInfo).length) {
          this.selectAll = true;
        } else {
          this.selectAll = false;
        }
      }
    }
  },
  created() {
    this.cartsData();
  },
  mounted() {},
  activated() {

  }
};
</script>
<style  scoped>
.cartContent {
  position: relative;
  /* background-color: #f2f2f2; */
  height: 100vh;
  /* 解决margin-top塌陷的问题 */
  /* border: 1px solid transparent; */
  overflow: hidden;
}
</style>
